Tab切换效果（仿爱奇艺）

该实例以PC端爱奇艺官网首页为例，实现tab切换效果，包括鼠标移动切换、自动切换 var index=1;
var timer=null;


timer = setInterval(autoPlay,3000);
var tds=document.getElementsByTagName('td');
var lis=document.getElementsByTagName('li');
var spans=document.getElementById('head').getElementsByTagName('span');

for(var i=0;i<tds.length;i ){
tds[i].onmouseover=function(){
clearInterval(timer);//鼠标移入，清除定时器
for(var j=0;j<tds.length;j ){
if(this==tds[j]){
tds[j].className='select';
lis[j].className='block';
spans[3*j].className='span1';
spans[3*j 1].className='span2';
index=j 1;//鼠标离开后切换到下一张图片
}
else{
tds[j].className='';
lis[j].className='';
spans[3*j].className='';
spans[3*j 1].className='';
}
}
}
tds[i].onmouseout = function(){
timer=setInterval(autoPlay,3000);//鼠标离开，继续自动切换
}
}

function autoPlay(){
if(index>=tds.length){
index=0;
};
changeOption(index);
index ;
}

function changeOption(curIndex){
for(var j=0;j<tds.length;j ){
tds[j].className='';
lis[j].className='';
spans[3*j].className='';
spans[3*j 1].className='';
};
tds[curIndex].className='select';
lis[curIndex].className='block';
spans[3*curIndex].className='span1';
spans[3*curIndex 1].className='span2';
index=curIndex;
}